<template>
    <div>
        <div class="echart-h" id="dataCollect"></div>
        <searchner
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            ref="dataCollectSearch"
            @downloadFile="downloadFile"
            :manageType="manageType"
        ></searchner>
        <el-table
            class="mt-10"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="tableData"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column
                property="qualityName"
                label="质控点名称"
            ></el-table-column>
            <el-table-column
                property="standardName"
                label="所属目标标准"
            ></el-table-column>
            <el-table-column
                property="objectName"
                label="所属诊改对象"
            ></el-table-column>
            <el-table-column
                property="orgName"
                width="130"
                label="质控点归属部门"
            ></el-table-column>
            <el-table-column property="unedited" label="数据采集状态">
            </el-table-column>
            <el-table-column
                property="autoUpdateValue"
                label="业务系统数据"
            ></el-table-column>
            <el-table-column
                property="personnelTrainingState"
                label="填报系统数据"
            ></el-table-column>
            <el-table-column
                property="correctValue"
                label="校准值"
            ></el-table-column>
        </el-table>
        <!-- 分页器-->
        <pagination
            v-show="total > 0"
            :total="total"
            :current.sync="page.pageIndex"
            :size.sync="page.pageSize"
            @pagination="pagination"
        />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    getDataCollection,
    getDataCollectionLimit,
    getDataCollectionLimitExport
} from '@/api/cockpit';
import { mapState } from 'vuex';
import { dataZoom, grid } from '@/config/common';

export default {
    name: 'DataCollect',
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        }
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        })
    },
    data () {
        return {
            page: {
                pageIndex: 1,
                pageSize: 10
            },
            total: 0,
            tableData: [],
            searchParams: {},
            echartCode: null,
            echartState: null,
            // 下载文件类型 init 为重置或初始，search为查询时下载类型，ecchart为点击echart时下载类型
            tableDataType: 'init',
            // echart中的层面id
            rectificationRangeId: null,
            tableLoading: false,
            orgId: null,
            // 部门组
            deptArr: []
        };
    },
    mounted () {
        this.initEchart();
        this.getTableData('init');
    },
    methods: {
        initEchart () {
            var chartDom = document.getElementById('dataCollect');
            var myChart = echarts.init(chartDom);
            const params = {
                year: this.year,
                indexCode: this.indexCode,
                code: this.indexCode === 'jxdw' ? null : this.code,
                // orgId: this.indexCode === 'jxdw' ? this.code : null
                collegeId: ['jxdw'].includes(this.indexCode) ? this.code : null
            };
            this.common.load(myChart);
            getDataCollection(params).then(res => {
                this.deptArr = res.angleNameList;
                const xAxisNames = [];
                res.angleNameList &&
                    res.angleNameList.map(child => {
                        xAxisNames.push(child.name);
                    });
                console.log(xAxisNames, 'xAxisNames');
                var option;
                option = { ...this.common.clinicalChangeOption };
                option.dataZoom = dataZoom;
                option.title.text = '质控点执行状态采集情况';
                option.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    // return this.common.formatVal(params, '%')
                    let str = `${params[0].name}<br>`;
                    if (res.angleNameList) {
                        res.angleNameList.map(child => {
                            if (params[0].name === child.name) {
                                str += `
                                质控点采集总数 ${child.pointSum}条<br>
                                已完成数据采集 ${child.dataCompleted}条<br>
                                未完成数据采集 ${child.unfinishedDataCompleted}条<br>
                                `;
                            }
                        });
                    }
                    for (let i = 0; i < params.length; i++) {
                        str += `${params[i].marker}
                            ${params[i].seriesName}
                            ${params[i].data}%<br>`;
                    }
                    return str;
                };
                option.xAxis[0].data = xAxisNames || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: (params) => {
                       return this.common.formatterAxisLabel(params)
                    }
                };
                option.xAxis[0].axisLabel.rotate = 0;
                option.yAxis[0].name = '数据采集进度(%)';
                const nameArr = ['已完成', '未完成'];
                const datas = res.values || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < datas.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
            });
            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            // triggerEvent为true时，触发点击事件
            myChart.on('click', params => {
                console.log(params, 'dataCollect');
                let state;
                if (params.seriesName === '未完成') {
                    state = 0;
                }
                if (params.seriesName === '已完成') {
                    state = 2;
                }
                // 通过名字获取id
                this.deptArr.map(item => {
                    if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
                        if (item.name === params.name) {
                            this.orgId = item.orgId;
                        }
                    }
                });
                this.echartState = state;

                this.tableDataType = 'echart';
                this.$refs.dataCollectSearch.resetQueryParam();
                this.getTableData('echart');
            });
        },
        handleSearch (params, isSearch, empty) {
            if (isSearch === 'init') this.page.pageIndex = 1;
            console.log(params, isSearch, 'ab');
            this.tableDataType = isSearch;
            this.searchParams = { ...params };
            this.getTableData(isSearch);
        },
        // 获取参数
        getParams (searchType) {
            console.log(searchType, 'searchType2');
            const defaultParam = {
                indexCode: this.indexCode,
                code: this.indexCode === 'jxdw' ? null : this.code,
                yearTime: this.year,
                // orgId: this.indexCode === 'jxdw' ? this.code : null,
                collegeId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                ...this.page
            };
            let params;
            if (searchType === 'init') {
                params = { ...defaultParam, init: 'init' };
            }
            if (searchType === 'search') {
                params = {
                    ...defaultParam,
                    ...this.searchParams,
                    code: this.searchParams.indexX
                        ? this.searchParams.indexX
                        : this.code,
                    orgId: this.searchParams.belongPart,
                    standardName: this.searchParams.name,
                    state: this.searchParams.dataStatus,
                    search: 'search'
                };
            }
            if (searchType === 'echart') {
                params = {
                    ...defaultParam,
                    state: this.echartState,
                    orgId: this.orgId,
                    echart: 'echart'
                };
            }
            return params;
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        getTableData (searchType) {
            this.tableLoading = true;
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getDataCollectionLimit(this.getParams(searchType)).then(res => {
                    this.tableData = res.dataList || [];
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
        },
        // 下载文件 downloadType: true 为查询参数 ，否则为初始参数
        downloadFile () {
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getDataCollectionLimitExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                    this.$refs.dataCollectSearch.downloading = false;
                });
            }
        },
        downFile (res) {
            this.common.downloadFile(res, {
                name: `${this.year}年${this.manageType}`,
                fileType: '.xlsx'
            });
        },
        // 分页器参数回传方法
        pagination (page) {
            console.log(page, 'params');
            this.page = page;
            this.getTableData(this.tableDataType);
        }
    }
};
</script>
<style lang="scss" scoped>
.echart-h {
    height: 520px;
}
</style>
